﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
    
</head>
<body>
  
  <div class="page-group">
    <div class="page page-current">
      
      <header class="bar bar-nav fs-header-small">
        <a href="${ctx.host}/rounds?type=${courseRound.courseStatus.finish ? 'FINISH' : (courseRound.courseStatus.cancel ? 'CANCEL' : 'GROUPING')}" class="icon icon-left pull-left"></a>
        <h1 class="title">课件详情</h1>
      </header>
      
      <div class="content">
        
        <div class="list-block media-list no-margin" style="margin-bottom: .5rem;">
          <ul>
            <li class="course">
              <div class=" item-content">
              
                <div class="item-media">
                  <img src="${cloud.prod}/${courseRound.course.cover}" style='width: 4rem;'>
                </div>
                
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">${courseRound.student.name}<small class="color-gray">&nbsp;${courseRound.student.mobile}</small></div>
                  </div>
                  
                  <div class="item-subtitle" style="height: 3.15rem;">
                      ${courseRound.course.name}<small>（${courseRound.course.hours}课时）</small><br>
                      约课状态：<span class="color-success">${courseRound.courseStatus.description}</span>
                  </div>
                </div>
                
              </div>
            </li>
          </ul>
        </div>
        
        <c:if test="${!courseRound.courseStatus.cancel and !courseRound.courseStatus.finish}">
          <div class="content-block-title text-center" style="margin: 1rem;">课程分组</div>
        
          <div class="courseware-group-panel">
            
            <div class="list-block no-margin">
              <ul>
                <li>
                  <div class="item-content item-link">
                    <div class="item-inner">
                      <div class="item-title">分组</div>
                      
                      <div class="item-input">
                        <input id="group-picker" type="text" placeholder="请选择分组" style="font-size: .7rem;">
                        <input type="hidden" name="groupId">
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <a class="item-content item-link" href="#fitness-tag-bind" data-toggle="push">
                    <div class="item-inner">
                      <div class="item-tile">标签：</div>
                      <div class="item-after">
                        <span class="placeholder">请选择学员标签</span>
                        <input type="hidden" name="tagId" value="">
                        <span class="tagNames"></span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            
            <div class="content-block group-submit" style="margin: 1.85rem 2rem;">
              <a href="#" class="button button-big button-fill button-success btn-group">提交</a>
            </div>
          </div>
        </c:if>
      </div>
      
    </div>
  </div>
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/courseware/grouping-courseware-view.js" />
  <script type="text/javascript">
    require(['page/courseware/grouping-courseware-view'], function(page) {
      page.init({
          'groups': JSON.parse('${persist.fitnessGroups(courseRound.course.id)}'),
          'tags': JSON.parse('${persist.fitnessTags}'),
          'roundId': '${courseRound.id}'
      })
    })
  </script>
  
</body>
</html>